<template>
	<view class="content">
		<view class="l-fixed">
			<!-- #ifndef MP-WEIXIN -->
			<view class="l-status"></view>
			<!-- #endif -->

			<!-- l-head -->

			<view class="l-head">
				<view class="l-search" @tap="navtoSearch">
					<image class="l-icon-search" src="../../static/l-icon-search.png" mode=""></image>
					<input type="text" class="l-search-input" disabled="" value="" placeholder="精彩热搜：刘慈欣《三体》" placeholder-class="l-holder" />
				</view>
				<button class="l-nav-bookrack" @tap="navto">书城</button>
			</view>
		</view>

		<view class="l-placeholder"></view>

		<view class="l-body">

			<!-- l-swiper -->

			<swiper class="l-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500" indicator-color="var(--c-bg-2)"
			 indicator-active-color="#41bdb2" circular @tap="$toast(`轮播图`)">
				<swiper-item>
					<view class="l-swiper-item">
						<image class="l-carousel-img" :src="img" mode="aspectFill"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="l-swiper-item">
						<image class="l-carousel-img" :src="img" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>

			<!-- l-madin -->
			<view class="l-main">
				<view class="l-h3">
					<text class="l-h3-title">推荐</text>
				</view>
				<!-- 使用v-for循环遍历推荐书籍数据列表，展示每本推荐书籍的相关信息 -->
				<view class="l-dl" v-for="(book, i) in recommendedBooks" :key="book.id" @tap="navtoDetail(book.id)">
					<image class="l-dt" :src="book.coverImg" mode="aspectFill"></image>
					<view class="l-dd">
						<view class="l-dd-title">
							{{book.name}}
						</view>
						<view class="l-dd-content">
							{{book.description}}
						</view>
						<view class="l-dd-footer">
							<text>作者：{{book.author}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Cookies from 'js-cookie';
	import config from '@/utils/config.js';
	export default {
		data() {
			return {
				title: 'Hello',
				img: `../../static/carousel-map/轮播图1.jpg`,
				bookimg: `../../static/books/book1.jpg`,
				recommendedBooks: [] // 定义并初始化recommendedBooks属性
			}
		},
		onLoad() {
			this.fetchRecommendedBooks(); 
		},
		methods: {
			navto() {
				uni.navigateTo({
					url: `/pages/book-mall/book-mall`
				})
			},
			navtoSearch() {
				uni.navigateTo({
					url: `/pages/HM-search/HM-search`
				});
			},
			navtoDetail(bookId) {
				uni.navigateTo({
					url: `/pages/detail/detail?bookId=${bookId}`
				})
			},
			fetchRecommendedBooks() {
				uni.showLoading({
					title: '加载中...'
				}); 
				// 从Cookie获取token
				const token = Cookies.get('token');
				if (!token) {
					uni.hideLoading();
					uni.showToast({
						icon: 'error',
						title: '未获取到有效token，请先登录'
					});
					return;
				}
				uni.request({
					url: `${config.apiBaseUrl}/BookCollection/recommendedBooks`,
					method: 'GET',
					 header: {
					 	'Content-Type': 'application/json',
					 	'token': token
					 },
					success: (res) => {
						uni.hideLoading(); // 隐藏加载提示
						if (res.data.code === 1) {
							
							this.recommendedBooks = res.data.data;
						} else {
							console.error('获取推荐书籍数据失败，原因：', res.data.msg);
						}
					},
					fail: (err) => {
						uni.hideLoading(); // 隐藏加载提示
						console.error('请求推荐书籍数据出错：', err);
						
					}
				});
			}
		}
	}
</script>

<style>
	/* l-head */

	.l-nav-bookrack {
		font-size: 30rpx;
	}


	/* l-main */

	.l-main {
		padding-bottom: 32rpx;
	}

	.l-h3 {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.l-h3-title {
		font: bold var(--f-size-5) normal;
	}

	.l-h3-more {
		display: flex;
		align-items: center;
		color: var(--c-bg-2);
	}

	.l-dl {
		margin-top: 32rpx;
		display: flex;
		width: 100%;
		height: 224rpx;
	}

	.l-dt {
		width: 160rpx;
		height: 100%;
		border-radius: 10rpx;
		margin-right: 24rpx;
	}

	.l-dd {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.l-dd-title {
		color: var(--c-txt-3);
		font: var(--f-size-3) normal;
		font-weight: bold;
	}

	.l-dd-content,
	.l-dd-footer {
		color: var(--c-txt-2);
		font: var(--f-size-2)/var(--f-size-4) normal;
	}

	.l-dd-content {
		width: 100%;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}

	.l-dd-footer {
		display: flex;
		align-items: center;
	}

	.l-dd-view-footer {
		width: 100%;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		-webkit-line-clamp: 2;
	}

	.l-dd-img {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		margin-right: 6rpx;
	}
</style>
